<template>
    <div>
      <div class="order">
        <div class="address" @click="$router.push('address')">
          <template v-if="consignee.id">
            <div class="icon">
              icon
            </div>
            <div class="info">
              <h3>收货人: {{consignee.name}} <span>{{consignee.mobile}}</span></h3>
              <p>收货地址: {{consignee.address}}</p>
            </div>
          </template>

          <template v-else>
            <div class="warn">
              请添加收货人信息
            </div>
          </template>

          <div class="arrow"></div>
        </div>

        <div class="binfo">
          <img :src="goodsImage" alt="">
          <div class="info">
            <h3>{{goodsName}}</h3>
            <div class="price">
              <p><i>￥</i>{{price}}</p>
              <span>x{{num}}</span>
            </div>
          </div>
        </div>

        <div class="change">
          <ul>
            <li>
              <span>购买数量</span>
              <p>
                <!-- <button @click="onDecNum">-</button>
                <i>{{num}}</i>
                <button @click="onIncNum">+</button> -->
                <span class="sign-btn" @click="onDecNum">-</span>
                <i>{{num}}</i>
                <span class="sign-btn" @click="onIncNum">+</span>
              </p>
            </li>
            <li>
              <span>店铺优惠</span>
              <p>包邮</p>
            </li>
            <li>
              <span>配送方式</span>
              <p>快递 免邮</p>
            </li>
            <li>
              <span>使用积分</span>
              <p>
                <input v-if="avaliablePoints > 0" type="number" placeholder="积分：" v-model="points" :disabled="avaliablePoints == 0">
                <span>可用积分：{{avaliablePoints}}</span>
              </p>
            </li>
            <li>
              <p>买家留言：</p>
              <input type="text" placeholder="留言:" v-model="msg">
            </li>
          </ul>
        </div>

      </div>
      <div class="bottom">
        <h3>共{{num}}件商品&nbsp;&nbsp;合计：<span><i>￥</i>{{total}}</span></h3>
        <button @click="makePurchase">提交订单</button>
      </div>
    </div>
</template>

<script>
import Consignee from '../api/order/consignee';
import User from '../api/user';
import Order from '../api/order/order';
import utils from '../utils/util';
import LocalStorage from '../utils/local-storage';

export default {
  name: 'order',

  data() {
    return {
      consignee: {
        id: 0,
        name: '',
        mobile: '',
        address: '',
      },
      num: 1,
      avaliablePoints: 0,
      points: '',
      msg: '',

      price: '',
      goodsName: '',
      goodsId: '',
      goodsImage: ''

    };
  },

  computed: {
    total() {
      return parseFloat(this.price * this.num).toFixed(2);
    },
  },

  mounted() {
    utils.wxPayHrefReload();

    const {id} = this.$route.query;
    this.initConsignee();
    this.initAvaliablePoints();
    this.initGoods(id);
  },

  methods: {
    async initGoods(goodsId) {
      this.goodsId = goodsId;
      // TODO: init by req
      let goods = LocalStorage.getObject('order-goods');
      this.price = goods.price;
      this.goodsName = goods.name;
      this.goodsImage = goods.image;
    },

    async initConsignee() {
      let consignee = LocalStorage.getObject('default-consignee');

      if (!consignee) {
        const list = await Consignee.getList();
        let defaults = list.filter(c => c.default > 0);

        if (defaults.length == 0) {
          consignee = list[0];
        } else {
          consignee = defaults[0];
        }

        LocalStorage.setObject('default-consignee', consignee);
      }

      this.consignee = {
        ...consignee,
        mobile: consignee.phone
      };

    },

    async initAvaliablePoints() {
      const info = await User.getInfo();
      this.avaliablePoints = Number(info.point);
    },

    async makePurchase() {
      const {goodsId, num, points, consignee, msg} = this;
      const consigneeId = consignee.id;
      if (Number(consigneeId) > 0) {
        Order.purchase({
          num, points, goodsId, consigneeId, msg,
          cb: res => {
            this.$router.push({
              path: '/my-order'
            });
          }
        });
      } else {
        alert('请填写收货信息');
      }

    },

    onIncNum() {
      this.num++;
    },

    onDecNum() {
      if (this.num > 1) {
        this.num--;
      }
    },

  }
}
</script>

<style scoped>
  .order{
    margin-bottom: 2rem;
  }
  .address{
    padding: .3rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    position: relative;
  }
  .address .icon{
    width: 1.4rem;
  }
  .address .info{
    width: 7rem;
  }
  .address .info h3{
    font-size: .4rem;
    color: #333;
    height: .6rem;
    line-height: .6rem;
  }
  .address .info h3 span{
    float: right;
  }
  .address .info p{
    font-size: .34rem;
    color: #555;
    margin-top: .1rem;
  }
  .address .arrow{
    right: .3rem;
  }
  .binfo{
    background: #f1f1f1;
    padding: .3rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }
  .binfo img{
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    margin-right: .3rem;
  }
  .binfo .info{
    flex-grow: 1;
    width: 6.8rem;
  }
  .binfo .info h3{
    font-size: .36rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .binfo .info .price{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    margin-top: .3rem;
  }
  .binfo .info .price p{
    color: #f00;
    font-size: .4rem;
  }
  .binfo .info .price p i{
    font-size: .36rem;
  }
  .change li{
    height: 1.2rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .3rem;
    border-bottom: 1px solid #e1e1e1;
  }
  .change li span {
    font-size: .35rem;
    flex-shrink: 0;
  }
  .change li p{
    font-size: .35rem;
  }
  .change li p input{
    border: 1px solid #cfcfcf;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 2rem;
    height: .8rem;
    line-height: .8rem;
    padding: 0 .2rem;
    font-size: .32rem;
  }
  .change li p .sign-btn{
    display: inline-block;
    text-align: center;
    width: .4rem;
    margin: 0 .2rem;
    padding: 0;
    border: none;
    background: none;
  }
  .change li input{
    flex-grow: 1;
    border: none;
    height: 1.1rem;
    line-height: 1.1rem;
    margin-left: .2rem;
  }
  .change li input:focus,
  .change li input:hover{
    outline: none;
  }
  .bottom{
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.3rem;
    border-top: 1px solid #c1c1c1;
    background: #fff;
    z-index: 1000;
  }
  .bottom h3{
    font-size: .4rem;
    line-height: 1.3rem;
    margin-right: .4rem;
    color: #333;
  }
  .bottom h3 span{
    color: #f00;
    font-size: .36rem;
  }
  .bottom h3 span i{
    font-style: normal;
    font-size: .32rem;
  }
  .bottom button{
    width: 2.4rem;
    background: #f00;
    color: #fff;
    border: none;
    display: block;
    height: 100%;
  }

  .warn {
    text-align: center;
    padding: .3rem
  }
</style>
